<template>
  <div class="personal">
    <div class="personal_message">
      <span class="personal_font leftFolat">个人信息</span>
      <el-button @click="changeStatus" style="float: right;margin-top:5px">编辑</el-button>
    </div>
    <div class="personal_datum">
      <el-form :model="personalForm">
        <div class="personal_left">
          <el-form-item class="form-item" prop="username" label="账号：">
            <el-input
              v-model="personalForm.username"
              type="text"
              readonly
              style="width: 200px;margin-left:-100px;"
            ></el-input>
          </el-form-item>
          <el-form-item class="form-item" prop="phone" label="号码：">
            <el-input
              v-model="personalForm.phone"
              type="text"
              :readonly="isReadOnly"
              style="width: 200px;margin-left:-100px;"
            ></el-input>
          </el-form-item>

          <el-form-item class="form-item" prop="sex" label="性别：">
            <el-radio-group
              v-model="personalForm.sex"
              :aria-readonly="isReadOnly"
              style="width: 200px;margin-left:-100px;"
            >
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="personal_right">
          <el-form-item class="form-item" prop="nickname" label="昵称：">
            <el-input
              v-model="personalForm.nickname"
              type="text"
              :readonly="isReadOnly"
              style="width: 200px;margin-left:-100px;"
            ></el-input>
          </el-form-item>
          <el-form-item class="form-item" prop="email" label="邮箱：">
            <el-input
              v-model="personalForm.email"
              type="text"
              :readonly="isReadOnly"
              style="width: 200px;margin-left:-100px;"
            ></el-input> </el-form-item
          ><el-form-item class="form-item" prop="password" label="密码：">
            <el-input
              v-model="personalForm.password"
              type="password"
              :readonly="isReadOnly"
              style="width: 200px;margin-left:-100px;"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import "@/assets/css/personal.css";

const vueUserInfo = {
  id: 1,
  username: "丫丫", //账号
  nickname: "小丫丫", //别名
  password: "1234567890",
  avatar: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  email: "19880030153@qq.com",
  phone: "19880030153",
  sex: 0,
};

const defaultUserInfo = {
  id: null,
  username: null, //账号
  nickname: null, //别名
  password: null,
  avatar: null,
  email: null,
  phone: null,
  sex: null,
};

export default {
  name: "personal",
  data() {
    return {
      personalForm: Object.assign({}, defaultUserInfo),
      isReadOnly: true
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    changeStatus() {
        this.isReadOnly = !this.isReadOnly;
    },
    getUserInfo() {
      this.personalForm = vueUserInfo;
    },
  },
};
</script>

<style></style>
